<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" >
        <el-form-item label="案件编号" prop="ajbh">
          <el-input
            v-model="queryParams.ajbh"
            placeholder="请输入案件编号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="扣押持有人姓名" prop="hsr">
          <el-input
            v-model="queryParams.hsr"
            placeholder="请输入扣押持有人姓名"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="没收状态" prop="ky_mszt">
            <el-select v-model="queryParams.ky_mszt" clearable  placeholder="请选择">
                <el-option
                v-for="item in option"
                :key="item.ky_mszt"
                :label="item.label"
                :value="item.ky_mszt">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="划拨状态" prop="ky_hbzt">
            <el-select v-model="queryParams.ky_hbzt" clearable  placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.ky_hbzt"
                :label="item.label"
                :value="item.ky_hbzt">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="退还状态" prop="ky_thzt">
            <el-select v-model="queryParams.ky_thzt" clearable  placeholder="请选择">
                <el-option
                v-for="item in optionss"
                :key="item.ky_thzt"
                :label="item.label"
                :value="item.ky_thzt">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收取起始日期" prop="ksrq">
            <el-date-picker clearable
                v-model="queryParams.ksrq"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择收取起始日期">
            </el-date-picker>
            </el-form-item>
            <el-form-item label="收取截至日期" prop="jsrq">
            <el-date-picker clearable
                v-model="queryParams.jsrq"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择收取截至日期">
            </el-date-picker>
            </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

    <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpd">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
      </el-col>
        <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleckfj">查看电子票据票据</el-button>

      </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
  
      <el-table v-loading="loading" :data="bzjtableList" @selection-change="handleSelectionChange"  @current-change="tableCurrentChange">
        <el-table-column type="selection" width="50" align="center" />
        <!-- <el-table-column label="序号" align="center" prop="xh" /> -->
        <el-table-column label="扣押编号" align="center" prop="ky_bh" width="100"/>
        <el-table-column label="案件编号" align="center" prop="ajbh" width="180"/>
        <el-table-column label="案件名称" align="center" prop="ajmc" width="220"/>
        <el-table-column label="扣押持有人" align="center" prop="ky_kykcyr"  width="100"/>
        <el-table-column label="扣押单位名称" align="center" prop="ky_kydw"  width="180"/>
        <el-table-column label="扣押持有人姓名" align="center" prop="hsr" width="100"/>
        <!-- <el-table-column label="扣押物品类型" align="center" prop="ky_type" width="150">
          <template slot-scope="scope">
          {{ scope.row.ky_type == 1 ? '货币有价证券' : scope.row.ky_type == 2 ? '其他' : '' }}
        </template>
        </el-table-column> -->
        <!-- <el-table-column label="扣押物品名称" align="center" prop="kymc" width="180"/> -->
        <!-- <el-table-column label="扣押物品数量" align="center" prop="kysl" width="100"/> -->
        <el-table-column label="扣押收取金额" align="center" prop="kyje" width="100"/>
        <el-table-column label="扣押收取方式" align="center" prop="ky_sqfs" width="100"/>
        <el-table-column label="币种" align="center" prop="kydw"  width="100"/>
        <el-table-column label="扣押收取状态" align="center" prop="ky_sqzt" width="100">
          <template slot-scope="scope">
          {{ scope.row.ky_sqzt == 0 ? '未收取' : scope.row.ky_sqzt == 1 ? '已收取' : '' }}
        </template>
        </el-table-column>
        <el-table-column label="扣押收取办案人" align="center" prop="ky_sqczr" width="180"/>
        <el-table-column label="扣押收取日期" align="center" prop="ky_sqrq" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.ky_sqrq, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="扣押退还金额" align="center" prop="ky_thje" width="100"/>
        <el-table-column label="扣押退还状态" align="center" prop="ky_thzt" width="100">
          <template slot-scope="scope">
          {{ scope.row.ky_thzt == 0 ? '未退还' : scope.row.ky_thzt == 1 ? '已退还' : '' }}
        </template>
        </el-table-column>
        <el-table-column label="扣押款退还办案人" align="center" prop="ky_thczr" width="100"/>
        <el-table-column label="扣押款退还日期" align="center" prop="ky_thrq" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.ky_thrq, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="扣押款划拨金额" align="center" prop="ky_hbje" width="100"/>
        <el-table-column label="扣押款划拨状态" align="center" prop="ky_hbzt" width="100">
          <template slot-scope="scope">
          {{ scope.row.ky_hbzt == 0 ? '未划拨' : scope.row.ky_hbzt == 1 ? '已划拨' : '' }}
        </template>
        </el-table-column>
        <el-table-column label="扣押款划拨办案人" align="center" prop="ky_hbczr" width="100"/>
        <el-table-column label="扣押款划拨日期" align="center" prop="ky_hbrq" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.ky_hbrq, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="扣押款没收金额" align="center" prop="ky_msje" width="100"/>
        <el-table-column label="扣押款没收状态" align="center" prop="ky_mszt" width="100">
        <template slot-scope="scope">
          {{ scope.row.ky_mszt == 0 ? '未没收' : scope.row.ky_mszt == 1 ? '已没收' : '' }}
        </template>
        </el-table-column>
        <el-table-column label="扣押款没收办案人" align="center" prop="ky_msczr" width="100"/>
        <el-table-column label="扣押款没收日期" align="center" prop="ky_msrq" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.ky_msrq, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpd(scope.row)" >修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <el-dialog title="查看附件" :visible.sync="dialogFormVisible">
        <el-table height="600" border :data="fileList" :header-cell-style="{ backgroundColor: 'rgb(237 237 237)'}">
          <el-table-column label="文件名称" prop="fjmc" />
          <el-table-column label="环节" prop="lb" />
          <el-table-column label="文件类型" prop="wjlx" />
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="success" plain size="mini" @click="handlexzfj(scope.row)" :disabled="!scope.row.wjdz" >下载附件</el-button>
              <el-button type="success" plain size="mini" @click="yul(scope.row)" :disabled="!(scope.row.wjdz.split('.')[1] == 'png' || scope.row.wjdz.split('.')[1] == 'jpg' || scope.row.wjdz.split('.')[1] == 'jpeg')" >预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
        <!-- 添加或修改【请填写功能名称】对话框 -->
        <el-dialog :title="tit" :visible.sync="open" width="45%" @closed="gb">
          <el-form ref="form" :inline="true" :model="form" :rules="ruless" label-width="120px">
        <el-form-item label="扣押编号">
          <el-input v-model="form.ky_bh"  :disabled="true" />
        </el-form-item>
        <el-form-item label="案件编号">
          <el-input v-model="form.ajbh"  :disabled="true" />
        </el-form-item>
        <el-form-item label="案件名称">
          <el-input v-model="form.ajmc"  :disabled="true"/>
        </el-form-item>
        <el-form-item label="扣押持有人姓名">
          <el-input v-model="form.hsr"  :disabled="true" />
        </el-form-item>
        <!-- <el-form-item label="扣押物品类型">
          <el-select v-model="form.ky_type" placeholder="请选择扣押物品类型">
            <el-option label="货币有价证券" value="1"></el-option>
            <el-option label="其他" value="2"></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="扣押物品名称" prop="ky_mc" v-if="form.ky_type === '2'">
          <el-input v-model="form.ky_mc" placeholder="请输入扣押物品名称" />
        </el-form-item>
        <el-form-item label="扣押物品数量" v-if="form.ky_type === '2'">
          <el-input-number v-model="form.ky_sl" @change="handleChange" :min="1" label="描述文字"/>
        </el-form-item> -->
        <el-form-item label="扣押金额" prop="kykje">
          <el-input v-model="form.kykje"  placeholder="请输入扣押金额"/>
        </el-form-item>
        <el-form-item label="扣押没收金额" prop="ky_msje">
          <el-input v-model="form.ky_msje"  placeholder="请输入扣押没收金额"/>
        </el-form-item>
        <el-form-item label="扣押退还金额" prop="ky_thje">
          <el-input v-model="form.ky_thje"  placeholder="请输入扣押退还金额"/>
        </el-form-item>
        <el-form-item label="扣押划拨金额" prop="ky_hbje">
          <el-input v-model="form.ky_hbje"  placeholder="请输入扣押划拨金额"/>
        </el-form-item>
        <el-form-item label="扣押收取日期" prop="ky_sqrq">
          <el-date-picker clearable v-model="form.ky_sqrq" type="date" value-format="yyyy-MM-dd"
            placeholder="请选择扣押收取日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="办案人" prop="ky_sqczr">
          <el-input v-model="form.ky_sqczr"   placeholder="请输入办案人"/>
        </el-form-item>
        <el-form-item label="附件选择" prop="files">
          <Upload v-model="form.files" :data="{}" acceptTip="*仅图片、PDF类型文件可在线预览"
             multiple></Upload>
        </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updList(form)">修改</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    </div>
  </template>
  
  <script>
  import { kyList , updKy , delKy,downLoadFile ,getFjList} from "@/api/system/bzjtable";
  import selectMultiple from '@/views/collect/addSecurity/selectMultiple'
  import Upload from '@/views/banking/Upload'
  import { tansParams, blobValidate } from "@/utils/ruoyi";
  import { saveAs } from 'file-saver'

  export default {
    name: "Bzjtable",
    data() {
      let amount = (rule, value, callback) => {
      if (value) {
        if (!/^(0|[1-9]\d*)(\s|$|\.\d{1,2}\b)/.test(value)) return callback(new Error('请输入非负数、最多含两位小数'))
        if (value <= 0) return callback(new Error('金额应大于0'))
        if (value > 999999999999.99) return callback(new Error('金额不能超过999999999999.99'))
      } else {
        return callback(new Error('请输入金额'))
      }
      callback()
    }
    let isValuePresent = (rule, value, callback) => {  
      if (value) {  
        callback();  
      }  else{
        return callback(new Error('请输入办案人'));  
      }
    }
    let isValuePresent1 = (rule, value, callback) => {  
      if (value) {  
        callback();  
      }  else{
        return callback(new Error('请输入扣押物品名称'));  
      }
    }
    let dialogVisibleFile = (rule, value, callback) => {
      console.log(value?.length, ';');
      if (rule.required) {
        if (value?.length) {
          callback()
        } else {
          return callback(new Error('请选择文件'))
        }
      }
      callback()
    }
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 【请填写功能名称】表格数据
        bzjtableList: [],
        fileList: [],
        // 弹出层标题
        title: "",
        // 日期范围
        dateRange: [],
        clickedRowData : null,
        dialogFormVisible: false,
        // 是否显示弹出层
        open: false,
        dialogOpen: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          ky_mszt : '',
          ky_hbzt : '',
          ky_thzt : '',
          ajbh: null,
          hsr: null,
          ksrq: '',
          jsrq:''
        },
        // 表单参数
        form: {
          xh : null,
          ky_bh : null,
          ajmc : null,
          ajbh : null,
          hsr : null,
          ky_type : null,
          ky_mc : null,
          ky_sl : 1,
          kykje : null,
          ky_msje : null,
          ky_thje : null,
          ky_hbje : null,
          ky_sqrq : null,
          ky_sqczr : null
        },
        flowerList:[],
        dialogFlowerTable:false,
        spyj:'',
        spr:'',
        sprzw:'',
        pdfUrl: '',
        currentIndex: '',
      // 表单校验
      ruless: {
        ky_mc: [{ required: true, validator: isValuePresent1, trigger: 'change' }],
        ky_sqczr: [{ required: true, validator: isValuePresent, trigger: 'change' }],
        kykje: [{ required: true, validator: amount, trigger: 'change' }],
        ky_msje: [{ required: true, validator: amount, trigger: 'change' }],
        ky_thje: [{ required: true, validator: amount, trigger: 'change' }],
        ky_hbje: [{ required: true, validator: amount, trigger: 'change' }],
        files: [{ required: true, validator: dialogVisibleFile, trigger: 'change' }]
      },
        option: [{
            ky_mszt: '1',
          label: '已没收'
        }, {
            ky_mszt: '0',
          label: '未没收'
        }],
        ky_mszt: '',
        options: [{
            ky_hbzt: '1',
          label: '已划拨'
        }, {
            ky_hbzt: '0',
          label: '未划拨'
        }],
        ky_hbzt: '',
        optionss: [{
            ky_thzt: '1',
          label: '已退还'
        }, {
            ky_thzt: '0',
          label: '未退还'
        }],
        ky_thzt: ''
      };
    },
    components: {
    selectMultiple,
    Upload
  },
    created() {
      this.getList();
    },
    methods: {
      handleChange(value) {
        console.log(value);
      },
      /** 查询【请填写功能名称】列表 */
      getList() {
        this.loading = true;
        kyList(this.queryParams).then(response => {
          this.bzjtableList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.getList();
        this.reset();
      },
      gb() {
      this.getList();
    },
      // 表单重置
      reset() {
        this.form = {
          xh : null,
          ky_bh :null,
          ajbh: null,
          ajmc: null,
          hsr: null,
          ky_type: null,
          ky_mc: null,
          ky_sl: null,
          kykje: null,
          ky_sqzt: null,
          ky_sqczr: null,
          ky_sqrq: null,
          ky_thje: null,
          ky_thzt: null,
          ky_thczr: null,
          ky_thrq: null,
          ky_hbje: null,
          ky_hbzt: null,
          ky_hbczr: null,
          ky_hbrq: null,
          ky_msje: null,
          ky_mszt: null,
          ky_msczr: null,
          ky_msrq: null
        };
        this.resetForm("form");
        this.ids = []; 
      },
      tableCurrentChange(row) {
      this.form = row
      this.currentIndex = row?.pIndex
    },
    /** 修改按钮操作 */
    handleUpd(row) {
      this.tit = "修改扣押款";
      this.clickedRowData = row;

      this.open = true;
    },
    /**修改 */
    updList(row){
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.xh != null) {
      updKy(row).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.open =false;
            this.title = "修改";
            this.reset();
          });
          
        }
        } else {
                // 表单验证失败，给出提示信息  
                this.$message.error('收款失败，请填写必要信息或上传附件！');  
                return false;  
            }
      });
    },
    handleckfj(row) {
        this.dialogFormVisible = true
        getFjList({ xh: this.form.ky_bh }).then((res) => {
          this.fileList = res.rows
          // this.fileList.forEach((item) => {
          //   item.typeName = this.dict.type.sys_type.filter((e)=>item.wjlx==e.value)[0].label
          // })
        })
  
      },
      handlexzfj(val) {
        // this.download('/confiscate/forfeitureOfDeposit/downLoadFile', { wjdz: this.form.wjdz }, `role_${new Date().getTime()}.png`)
        downLoadFile({ wjdz: val.wjdz }).then(async (data) => {
          this.$modal.msgSuccess("下载成功");
          const url = window.URL.createObjectURL(data);
          this.pdfUrl = url;//直接用iframe标签
          const isBlob = blobValidate(data);
          if (val.wjdz && val.wjdz.split('.')[1] == 'png' || val.wjdz &&val.wjdz.split('.')[1] == 'jpg' || val.wjdz &&val.wjdz.split('.')[1] == 'jpeg') {
            if (isBlob) {
              const blob = new Blob([data])
              saveAs(blob, `role_${new Date().getTime()}.png`)
            } else {
              const resText = await data.text();
              const rspObj = JSON.parse(resText);
              const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
              Message.error(errMsg);
            }
          } else if (val.wjdz &&val.wjdz.split('.')[1] == 'pdf') {
            // let pdfUrl = window.URL.createObjectURL(new Blob([data], { type: "application/pdf" }));
            // window.open(pdfUrl)
            let blob = new Blob([data], { type: 'application/pdf' });
            let downloadElement = document.createElement("a");
            let href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = `pdf下载`    //下载后的文件名，根据需求定义
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
          } else {
            const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }) // response就是接口返回的文件流
            const objectUrl = URL.createObjectURL(blob)
            const a = document.createElement('a') // 创建a标签
            a.href = objectUrl
            a.download = 'excel下载' // 自定义文件名
            a.click() // 下载文件
            window.URL.revokeObjectURL(objectUrl) // 释放内存
            // link.remove()
          }
          this.dialogFormVisible = false
        })
      },
    /** 删除按钮操作 */
    handleDelete(row) {
      debugger
      const ky_bhs = row.ky_bh || this.ids;
      this.$modal.confirm('是否确认删除扣押编号为"' + ky_bhs + '"的数据项？').then(function () {
        return delKy(ky_bhs);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      // // 多选框选中数据
      handleSelectionChange(selection) {
        if (selection.length > 0) {  
          // 假设我们只关心第一行数据  
          const selectedRow = selection[0];  
            
          // 填充 form 对象中对应的字段  
          this.form.ky_bh = selectedRow.ky_bh;  
          this.form.ajbh = selectedRow.ajbh;  
          this.form.ajmc = selectedRow.ajmc;  
          this.form.hsr = selectedRow.hsr;  
          this.form.ky_type = selectedRow.ky_type; 
          this.form.ky_mc = selectedRow.ky_mc;  
          this.form.ky_sl = selectedRow.ky_sl;  
          this.form.kykje = selectedRow.kykje;  
          this.form.ky_msje = selectedRow.ky_msje;  
          this.form.ky_thje = selectedRow.ky_thje;  
          this.form.ky_hbje = selectedRow.ky_hbje;  
          this.form.ky_sqrq = selectedRow.ky_sqrq;  
          this.form.ky_sqczr = selectedRow.ky_sqczr;  
          // 打开对话框  
          // this.open = true;  
          debugger
          this.ids = selection.map(item => item.ky_bh)
          this.single = selection.length !== 1
          this.multiple = !selection.length
        } else {  
          // 如果没有选中任何行清空form对象
          this.reset(); // 假设你有一个方法来重置 form 对象  
        }  
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
        this.getList;
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/bzjtable/export', {
          ...this.queryParams
        }, `bzjtable_${new Date().getTime()}.xlsx`)
      }
    }
  };
  </script>
  